<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";
import emitter from "@/utils/mitt.js";

const getAssetsFile = inject("getAssetsFile");

const props = defineProps({
	title: {
		type: String,
		default: () => {
			return "";
		},
	},
	list: {
		type: Array,
		default: () => {
			return [];
		},
	},
});

// console.log(props.list);

const changePath = (path, query = null) => {
	emitter.emit("changePath", {
		path: path,
		query: query,
	});
};
</script>

<template>
	<div class="buttonMainList">
		<div class="mainTitle flex flex_between align_itemsCenter">
			<span class="mainTitleSpan">
				{{ props.title }}
			</span>
		</div>
		<n-grid :cols="3" :x-gap="10" :y-gap="10">
			<n-gi v-for="item in props.list">
				<div class="buttonMain" @click="changePath(item.pagePath)">
					<div class="buttonInner flex flex_around flex_column align_itemsCenter">
						<img :src="getAssetsFile(`img/${item.iconPath}`)" alt="" style="height: 36px; width: 36px" />
						<div>{{ item.name }}</div>
					</div>
				</div>
			</n-gi>
		</n-grid>
	</div>
</template>

<style scoped>
.mainTitle {
	width: 100%;
	height: 33px;
	margin-bottom: 8px;
	border-bottom: 2px solid var(--primary-color);
}
.mainTitleSpan {
	display: block;
	float: left;
	overflow: hidden;
	width: 134px;
	font-size: 18px;
	padding-left: 10px;
	box-sizing: border-box;
	line-height: 33px;
	color: #fff;
	background: url("@/assets/img/content/mainPage/titleBg.png") no-repeat;
	background-size: 100% 100%;
}

.buttonMainList {
	height: 100%;
}

.buttonMain {
	height: 70px;
	width: calc(100% - 10px);
	padding: 5px;
	border: 1px solid #d9d9d9;
	border-radius: 5px;
	cursor: pointer;
	background: #e9f5ff;
}

.buttonInner {
	height: 100%;
	color: #000000;
	text-align: center;
	font-size: 16px;
}
</style>
